<template>
    <div>
        <div style='margin-bottom: 20px;margin-top: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item name="nickname" label="代理昵称">
                            <a-input v-model:value="formState['nickname']" :placeholder="'请输入'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item name="phone" label="代理手机号">
                            <a-input v-model:value="formState['phone']" :placeholder="'请输入'"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item name="state" label="类型">
                            <a-radio-group v-model:value="formState['state']">
                                <a-radio-button value="">全部</a-radio-button>
                                <a-radio-button value="0">正常</a-radio-button>
                                <a-radio-button value="1">冻结</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="10" style="text-align: left">
                        <a-button type="primary" @click="adds">新增</a-button>

                    </a-col>
                    <a-col :span="24" style="text-align: right">

                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px"
                            @click="() => { formRef.resetFields(); onFinish(true) }">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 订单列表 -->
        <a-table :columns="columns" :data-source="data" :pagination="{ current, pageSize, total: totalCount }"
            @change="pageClick">
            <template #bodyCell="{ column, record }">

                <template v-if="column.dataIndex == 'superior_status'">
                    <span style="color: red;" v-if="record.superior_logoff == 1">注销</span>
                    <span :style="{ color: record.superior_status == 0 ? 'green' : 'skyblue' }" v-else>{{
                        record.superior_status
                        == 0 ?
                        '正常' : "冻结" }}</span>
                </template>

                <template v-if="column.dataIndex == 'superior_tech_rate'">
                    <span>{{ record.superior_tech_rate }}%</span>
                </template>

                <template v-if="column.dataIndex == 'superior_user_rate'">
                    <span>{{ record.superior_user_rate }}%</span>
                </template>

                <template v-if="column.dataIndex === 'operation'">
                    <a-popconfirm v-if="record.superior_logoff == 0"
                        :title="record.superior_status != 0 ? '真的要解除冻结吗?' : '确定要冻结吗'"
                        @confirm="record.superior_status == 0 ? dj(record) : jd(record)">
                        <a :style="{ color: share.color, marginLeft: '15px' }">{{ record.superior_status == 0
                            ? "冻结" : "解冻"
                        }}</a>

                    </a-popconfirm>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="showModal(record.uid)">详情</span>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="techShow(record)">技师</span>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="userShow(record)">用户</span>
                    <span :style="{ marginLeft: '15px', color: share.color }" @click="set(record)">修改</span>

                </template>
            </template>
        </a-table>
        <!-- 代理详情 -->
        <a-modal v-model:visible="xqModal" title="代理详情" :width="1170" @ok="xqOk" :destroyOnClose="true">
            <div class="xqBox">
                <div class="one">
                    <a-image :width="155" :height="155"
                        :src="share.http + `/${xqData.data.superior_dir}/${xqData.data.superior_header}`"
                        fallback="" />
                    <div class="one-left">
                        <div>{{ xqData.data.superior_nickname }}</div>
                        <div>
                            <span class="title">代理UID:</span>
                            <span class="value color">{{ xqData.data.uid }}</span>
                        </div>
                        <div>
                            <span class="title">代理注册时间:</span>
                            <span class="value">{{ xqData.data.superior_register_date }}</span>
                        </div>
                        <div>
                            <span class="title">最后登录时间:</span>
                            <span class="value">{{ xqData.data.superior_lastLogin_date }}</span>
                        </div>
                        <div>
                            <span class="title">可用金额:</span>
                            <span class="value color">{{ xqData.data.superior_balance }}</span>
                        </div>
                    </div>
                    <div class="one-right">
                        <div style="opacity: 0;">222</div>
                        <div>
                            <span class="title">UUID:</span>
                            <span class="value">{{ xqData.data.superior_uuid }}</span>
                        </div>
                        <div>
                            <span class="title">代理电话:</span>
                            <span class="value">{{ xqData.data.superior_phone }}</span>
                        </div>
                        <div>
                            <span class="title">登录IP:</span>
                            <span class="value color">{{ xqData.data.superior_ip }}</span>
                        </div>
                        <div>
                            <span class="title">冻结金额:</span>
                            <span class="value color">{{ xqData.data.superior_frozen_amount }}</span>
                        </div>
                    </div>
                </div>
                <div class="status">
                    <div class="zx" v-if="xqData.data.superior_logoff == 1">
                        <div style="color: #FF7967;margin-bottom: 20px;">账户已注销</div>
                        <div>
                            <span class="title">注销时间间:</span>
                            <span class="value ">{{ xqData.data.superior_logoff_date }}</span>
                        </div>
                    </div>
                    <div class="dj" v-else-if="xqData.data.superior_status == 1">
                        <div style="color: skyblue;">代理冻结</div>
                        <div>
                            <span class="title">操作人:</span>
                            <span class="value color">{{ xqData.data.superior_operator }}</span>
                        </div>
                        <div>
                            <span class="title">冻结时间:</span>
                            <span class="value ">{{ xqData.data.superior_freeze }}</span>
                        </div>
                        <div>
                            冻结原因:
                        </div>
                        <a-textarea :rows="3" disabled v-model:value="xqData.data.superior_reason" />
                    </div>
                    <div class="zc" v-else>
                        <div style="font-size: 24px;color: green;">代理正常</div>
                    </div>
                </div>
                <div class="cc">
                    <div class="left">
                        <div>抽成率信息:</div>
                        <div class="card" style="color: #66E88B ;margin-right: 24px;">
                            <span style="font-size: 32px;">{{ xqData.data.superior_tech_rate }}%</span>
                            <div style="font-size: 16px;">技师抽成率</div>
                        </div>
                        <div class="card" style="color: #FFC24C ;">
                            <span style="font-size: 32px;">{{ xqData.data.superior_user_rate }}%</span>
                            <div style="font-size: 16px;">用户抽成率</div>
                        </div>
                    </div>
                    <div class="right">
                        <div>代理标签:</div>
                        <div style="margin-top: 10px;">
                            <a-tag color="purple" v-for="item in xqData.data.superior_label.split(',')">{{ item }}</a-tag>
                        </div>

                    </div>
                </div>
            </div>
        </a-modal>
        <!-- 冻结原因 -->
        <a-modal v-model:visible="djModal" title="冻结原因" :width="600" @ok="djOK" :destroyOnClose="true">
            <a-textarea :rows="3" v-model:value="textDj" />
        </a-modal>
        <!-- 代理技师信息 -->
        <a-modal v-model:visible="techModal" title="代理技师" :width="1170" @ok="techOk" :destroyOnClose="true">
            <a-table :columns="techCo" :data-source="techData" :scroll="{ y: 800 }"
                :pagination="{ current: techCurrent, pageSize: Size, total: techTotal }" @change="techPageClick">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex == 'gender'">
                        <span>{{ record.gender == 0 ? '女' : '男' }}</span>
                    </template>
                </template>
            </a-table>
        </a-modal>
        <!-- 代理用户信息 -->
        <a-modal v-model:visible="userModal" title="代理用户" :width="1170" @ok="userOk" :destroyOnClose="true">
            <a-table :columns="userCo" :data-source="userData" :scroll="{ y: 800 }"
                :pagination="{ current: userCurrent, pageSize: Size, total: userTotal }" @change="UserPageClick">
            </a-table>
        </a-modal>
        <!-- 新增代理操作 -->
        <a-modal v-model:visible="addModal" title="创建代理" :width="850" @ok="addOk" :destroyOnClose="true" :z-index="20">
            <a-form ref="addForm" :model="addFormState" name="dynamic_rule">

                <a-form-item label="代理昵称" name="nickname"
                    :rules="[{ required: true, message: '请输入昵称' }, { validator: share.validate }]">
                    <a-input v-model:value="addFormState.nickname" />
                </a-form-item>
                <a-form-item label="代理手机号" name="phone" :rules="[{ validator: validateIdentifyCode }]">
                    <a-input v-model:value="addFormState.phone" />
                </a-form-item>
                <a-form-item label="代理标签" name="label"
                    :rules="[{ required: true, message: '请输入标签!' }, { validator: share.validate }]">
                    <a-select v-model:value="addFormState.label" mode="tags" placeholder="Please select"></a-select>
                </a-form-item>
                <a-form-item label="技师抽成率(%)" name="tech_rate" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.tech_rate" />
                </a-form-item>
                <a-form-item label="用户抽成率" name="user_rate" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.user_rate" />
                </a-form-item>
                <a-form-item label="代理头像" name="image">
                    <a-upload :fileList="fileListData" :maxCount="1" list-type="picture-card" :beforeUpload="beforeUp">
                        <div>
                            <plus-outlined />
                            <div style="margin-top: 8px">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
            </a-form>
        </a-modal>
        <!-- 修改代理操作 -->
        <a-modal v-model:visible="setModal" title="代理修改" :width="850" @ok="setOk" :destroyOnClose="true" :z-index="20">
            <a-form ref="setForm" :model="setFormState" name="dynamic_rule">

                <a-form-item label="代理昵称" name="superior_nickname"
                    :rules="[{ required: true, message: '请输入昵称' }, { validator: share.validate }]">
                    <a-input v-model:value="setFormState.superior_nickname" />
                </a-form-item>
                <a-form-item label="代理手机号" name="superior_phone" :rules="[{ validator: validateIdentifyCode }]">
                    <a-input v-model:value="setFormState.superior_phone" />
                </a-form-item>
                <a-form-item label="代理标签" name="superior_label ">
                    <a-select v-model:value="setFormState.superior_label" mode="tags"></a-select>
                </a-form-item>
                <a-form-item label="技师抽成率(%)" name="superior_tech_rate" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="setFormState.superior_tech_rate" />
                </a-form-item>
                <a-form-item label="用户抽成率" name="superior_user_rate" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="setFormState.superior_user_rate" />
                </a-form-item>
                <a-form-item label="可用余额" name="superior_balance" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="setFormState.superior_balance" />
                </a-form-item>
                <a-form-item label="冻结余额" name="superior_frozen_amount" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="setFormState.superior_frozen_amount" />
                </a-form-item>
                <a-form-item label="代理头像" name="image">
                    <a-upload :fileList="fileListData" :maxCount="1" list-type="picture-card" :beforeUpload="beforeUp">
                        <div>
                            <plus-outlined />
                            <div style="margin-top: 8px">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="状态" name="superior_status">
                    <a-radio-group v-model:value="setFormState.superior_status" name="superior_status">
                        <a-radio value="0">正常</a-radio>
                        <a-radio value="1">冻结</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-textarea :rows="3" v-model:value="textDj" v-show="setFormState.superior_status==1" placeholder="请输入冻结原因"/>
            </a-form>
        </a-modal>
    </div>
</template>


<script setup >
import { PlusOutlined } from '@ant-design/icons-vue';
import { ref, onMounted, reactive } from 'vue'
import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { superiorAPI } from '../../../api/management'
import { imageAPI } from '../../../api/management';
import {debounce} from 'lodash'
const store = useUserData()     //pinia用户数据
const router = useRouter();

const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页

const expand = ref(false);  //查询部分是否展示更多
const formRef = ref(null);
const formState = reactive({
    phone: '',
    nickname: '',
    state: '',
});

const columns = [{   //表格头部
    title: '代理昵称',
    dataIndex: 'superior_nickname',
    key: 'superior_nickname',
    fixed: 'left',
}, {
    title: '代理手机号',
    dataIndex: 'superior_phone',
    key: 'superior_phone',
    fixed: 'left',

}, {
    title: '注册时间',
    dataIndex: 'superior_register_date',
    key: 'superior_register_date',
}, {
    title: '最后登录',
    dataIndex: 'superior_lastLogin_date',
    key: 'superior_lastLogin_date',
},
{
    title: '当前状态',
    dataIndex: 'superior_status',
    key: 'superior_status',
},
{
    title: '可用余额',
    dataIndex: 'superior_balance',
    key: 'superior_balance',
},
{
    title: '冻结余额',
    dataIndex: 'superior_frozen_amount',
    key: 'superior_frozen_amount',
},
{
    title: '技师抽成率',
    dataIndex: "superior_tech_rate",
    key: "superior_tech_rate",
},
{
    title: '用户抽成率',
    dataIndex: "superior_tech_rate",
    key: "superior_tech_rate",
}, {
    title: '操作',
    dataIndex: 'operation',
    align: 'center'

}

];

const data = ref([]);  //表格数据内容



const onFinish = (i) => {
    if (i == true) {  //bug  重置无效
        formState.username = '',
            formState.userphone = '',
            formState.date = [];
        formState.techphone = '';
        formState.usernickname = '';
        formState.project = [];
        formState.techname = '';
        formState.state = ''
    }
    pageClick()
}



// 详情操作---------------------------------------------------------------------------
const xqData = reactive({
    data: {},
});

const showModal = async (uid) => {
    let res = await superiorAPI(`selectDan|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    xqData.tech = res.tech;
    xqData.user = res.user;
    xqData.data = res.data[0];
    xqData.techTotal = res.techTotal;
    xqData.userTotal = res.userTotal;
    xqModal.value = true;
}
const xqOk = () => {
    xqModal.value = false;
}

const xqModal = ref(false);


//查看代理技师信息--------------------------------------------------------
const techUID = ref('')
const techCurrent = ref(1);
const techTotal = ref(0)
const techData = ref([])
const techCo = [{   //技师表格头部
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
}, {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    fixed: 'left',

}, {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
}
];
const Size = ref(10);

const techModal = ref(false);
const techShow = async (item) => {
    techCurrent.value = 1;
    let res = await superiorAPI(`selTU|${item.uid}|tech|${techCurrent.value}|${Size.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    techData.value = res.data;
    techModal.value = true;
    techUID.value = item.uid
    techTotal.value = res.total - 0;
}

const techPageClick = async (item) => {   //点击翻页技师信息
    techCurrent.value = item.current;
    let res = await superiorAPI(`selTU|${techUID.value}|tech|${techCurrent.value}|${Size.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    techData.tech = res.data;
    techTotal.value = res.total - 0;
}

const techOk = () => {
    techData.value = [];
    techModal.value = false;

}

// 查看用户代理信息-------------------------------------------------
const userCurrent = ref(1)
const userUID = ref('');
const userModal = ref(false);
const userTotal = ref(0)
const userData = ref([]);
const userCo = [{   //表格头部
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',

}, {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
}
];

const userShow = async (item) => {     //打开数据时
    userCurrent.value = 1;
    let res = await superiorAPI(`selTU|${item.uid}|user|${userCurrent.value}|${Size.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    userData.value = res.data;
    userModal.value = true;
    userUID.value = item.uid
    userTotal.value = res.total - 0;
}
const userOk = () => {                    //点击确定关闭信息
    userData.value = [];
    userModal.value = false;
}

const UserPageClick = async (item) => {  //点击翻页用户信息
    console.log(item);
    userCurrent.value = item.current;
    let res = await superiorAPI(`selTU|${userUID.value}|user|${userCurrent.value}|${xqData.size}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    userData.value = res.data;
    userTotal.value = res.total - 0;
}

// 新增操作------------------------------------------------------------------------------------------
const addForm = ref(null);
const addModal = ref(false);
const fileList = ref('');
const fileListData = ref([]);
const adds = () => {
    addModal.value = true
}
const beforeUp = f => {               //上传图片前
    fileList.value = f;
    fileListData.value = [{ url: URL.createObjectURL(f) }]
    return false;
}
const addFormState = ref({
    nickname: "",
    phone: '',
    label: [],
    tech_rate: 0,
    user_rate: 0,
    img: ''
});

const validateIdentifyCode = (rule, value) => {    //手机号码验证
    if (!/^1[3456789][0-9]{9}$/.test(value)) {
        return Promise.reject('手机号格式不正确');
    } else {
        return Promise.resolve()
    }
};
const validayeNUmber = (rule, value) => {

    if (value >= 0) {
        return Promise.resolve()
    } else {
        return Promise.reject("不能小于0")
    }
}
const addOk = async () => {
    addForm.value.validateFields()
        .then(async re => {
            let imgs = await imageAPI(`superiorAdd|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);
            console.log(imgs);
            if (imgs.code != 200) {
                message.error(imgs.message);
                return;
            }
            addFormState.value.img = imgs.file;

            let res = await superiorAPI(`add|${addFormState.value.nickname}|${addFormState.value.phone}|${addFormState.value.label}|${addFormState.value.tech_rate}|${addFormState.value.user_rate}|${addFormState.value.img}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            message.success("添加成功");

            addForm.value.resetFields();
            fileListData.value = [];
            fileList.value = '';
            addModal.value = false;
            pageClick();

        })

}

// 修改操作-------------------------------------------------
const setForm = ref(null);
const setModal = ref(false);

const set = (data) => {
    const item = JSON.parse(JSON.stringify(data));
    textDj.value = item.superior_reason;
    setModal.value = true;
    setFormState.value = item;
    setFormState.value.superior_label = item.superior_label.split(",");
    setFormState.value.superior_status = item.superior_status[0] ? item.superior_status[0] : item.superior_status;
    fileListData.value = [{ url: `${share.http}/${item.superior_dir}/${item.superior_header}` }];
}

const setFormState = ref();

const setOk = async () => {
    setForm.value.validateFields()
        .then(async re => {
            if (textDj.value.includes("|")) {
                message.error("含有特殊字符|");
                return;
            }
            if (fileList.value) {  //当上传了文件

                let up = await imageAPI(`SuperSet|${setFormState.value.superior_header}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);   //进行图片上传操作

                if (up.code != 200) {
                    message.error(up.message);
                    return
                } else {
                    setFormState.value.superior_header = up.file;
                }
            } else {          //当没有上传文件
                let up = await imageAPI(`SuperNoset|${setFormState.value.superior_header}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
                if (up.code == 400) {
                    message.error(up.message);
                    return
                }
            }
            
            let res = await superiorAPI(`set|${setFormState.value.uid}|${setFormState.value.superior_nickname}|${setFormState.value.superior_phone}|${setFormState.value.superior_label}|${setFormState.value.superior_tech_rate}|${setFormState.value.superior_user_rate}|${setFormState.value.superior_header}|${setFormState.value.superior_status}|${setFormState.value.superior_frozen_amount}|${setFormState.value.superior_balance}|${textDj.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);

            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            message.success("修改成功");

            setForm.value.resetFields();
            fileListData.value = [];
            fileList.value = '';
            setModal.value = false;
            pageClick();

        })

}



// 冻结和解冻操作----------------------------------------------------------------
const djModal = ref(false);
const textDj = ref('')
const djUID = ref('')
const djOK = async () => {
    if (textDj.value.includes("|")) {
        message.error("含有特殊字符|");
        return;
    }
    let res = await superiorAPI(`dj|${djUID.value}|${textDj.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    message.success("修改成功");
    pageClick();
    djModal.value = false;
}
const dj = async (item) => {
    djModal.value = true;
    djUID.value = item.uid;
    textDj.value = '';
}

const jd = async (item) => {
    let res = await superiorAPI(`jd|${item.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);

    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    message.success("修改成功");
    pageClick();
}



const debouncedPageClick = debounce(async(item)=>{                      //防抖
    item ? current.value = item.current : current.value = 1;
    let res = await superiorAPI(`sel|${formState.phone}|${formState.nickname}|${formState.state}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)  //电话，昵称，状态，商品 多少一页，多少页
    console.log(res);
    if (!res) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    data.value = res.data;
    totalCount.value = res.total;
},300)

const pageClick = async (item) => {   //点击表格的操作
    debouncedPageClick(item);
}

onMounted(async () => {
    let res = await superiorAPI(`sel|${formState.phone}|${formState.nickname}|${formState.state}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)  //电话，昵称，状态，商品 多少一页，多少页
    console.log(res);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }

    totalCount.value = res.total;
    data.value = res.data;

})

</script>

<style scoped src="../../css/management/superior.scss" />



